<template>
  <div class="TaskHistory">
    <n-spin :show="state.loadingFlag">
      <n-scrollbar style="height: 700px">
        <div v-if="state.list.length" class="comment-list mr-20 flex-col gap-10">
          <div v-for="(item, index) in state.list" :key="index" class="comment-item p-10">
            <MyInfo :src="item.avatar" :text="item.createUserName">
              <template #after>
                <div class="ml-20">{{ item.createTime }}</div>
              </template>
            </MyInfo>
            <div class="mt-10 bg-#f5f6fb p-10" style="white-space: pre-line">
              {{ item.history }}
            </div>
          </div>
        </div>
        <div
          v-if="state.list.length === 0 && !state.loadingFlag"
          class="mt-200 flex-col items-center"
        >
          <img src="@/assets/no-data.png" class="w-100" />
          <div class="font-size-14 color-#9BA3B2">暂无内容</div>
        </div>
      </n-scrollbar>
    </n-spin>
  </div>
</template>
<script setup lang="jsx">
import * as taskProjectApi from '@/api/taskProject'
defineOptions({ name: 'TaskHistory' })
const props = defineProps({
  exeId: {
    type: String,
    default: '',
  },
})
const state = reactive({
  list: [],
  loadingFlag: true,
})
const methods = reactive({
  async getList() {
    state.loadingFlag = true
    const res = await taskProjectApi.historyList({ projectExeId: props.exeId })
    state.list = res.data
    state.loadingFlag = false
  },
})

watch(
  () => props.exeId,
  () => {
    methods.getList()
  },
  {
    immediate: true,
  }
)
</script>
<style lang="scss" scoped></style>
